<template>
	<view class="">


		<!-- <view class="hint-wrapper">
			<view class="title">请拍摄/上传银行卡</view>
		<view class="subtitle">
			请确上传<text>{{ agentName }}</text>本人的银行卡
		</view>
		</view> -->
		<view class="upload-wrapper" @click="uploadBankCard">
			<view class="image-center">
				<img class="upload-bg" :src="formData.settleBankCardImg ||
		'/static/icon/add_bank_bg.png'
		" />
			</view>

			<view class="upload-button" v-if="!formData.settleBankCardImg">
				<image class="upload-img" src="/static/icon/pic_icon.png" />
				<view class="upload-text">点击拍摄或上传银行卡</view>
			</view>



		</view>
		<view class="form-wrapper">
			<!-- <view class="row">
				<view class="label"><text>*</text>账户名称</view>
				<input v-model="formData.accountName" :placeholderStyle="placeholderStyle" placeholder="自动识别，可修改"
					class="value" />
			</view> -->
			<!-- <view class="divider" /> -->
			<view class="row">
				<view class="label">银行卡号</view>
				<input v-model="formData.cardNo" type="number" :placeholderStyle="placeholderStyle" :maxlength="19"
					@input="noChange" placeholder="自动识别，可修改" class="value" style="width: 80%" />
			</view>

			<view class="divider" />
			<view class="row">
				<view class="label"> 开户主行 </view>
				<input v-model="formData.bankName" :placeholderStyle="placeholderStyle" @input="nameChange"
					placeholder="自动识别，可修改" class="value" />
			</view>
			<view class="divider" />

			<view class="row">
				<view class="label">预留手机号</view>
				<input v-model="formData.accountMobileNo" :placeholderStyle="placeholderStyle" placeholder="请输入手机号"
					class="value" />
			</view>
			<view class="divider" />
			<view class="row">
				<view class="label">默认账户</view>
				<switch @change="defaultChange" size="20px" active-color="#0090ff" inactive-color="#ededed" />
			</view>
		</view>
		<button @click="submitEvent">更换</button>
		<!-- 选择开户行 -->
		<select-account-bank :visible="showSelectAccountBank" :selectedBankName="formData.bankName"
			@getBankNameData="getBankNameDataFn" @operate="selectAccountBankCallback" @close="selectAccountBankClose"
			ref="childRef" />
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		showToast
	} from "@/utils/toast";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		onlyNumberReg,
		onlyCnReg
	} from "@/utils/regExp";
	import {
		uploadImg,
		getOsssSignature
	} from '@/utils/upload';
	import {
		queryBankCardInfo,
		queryBankName
	} from "@/api/common";
	import {
		useStore
	} from "@/store";
	import SelectAccountBank from '@/components/select-account-bank/index.vue';
	import {
		bindBankCard
	} from "@/api/mine";
	const store = useStore();
	/** 获取主行列表回调 */
	let bankNameList = ref([]);

	function getBankNameDataFn(data) {
		bankNameList.value = [];
		data.forEach(item => {
			bankNameList.value.push(item.bankName);
		});
	}

	function selectAccountBankCallback(data) {
		console.log('选择开户行回调=>', data);

		formData.value.bankName = data.bankName;
		formData.value.bankId = data.bankId;
		selectAccountBankClose()
	}
	// 取消关闭弹框
	const selectAccountBankClose = () => {
		childRef.value.closeDialog();
	}
	const childRef = ref(null);
	// OSS签名
	let ossConfig = ref({});
	// 提示文字样式
	const placeholderStyle = "color: #999999;";
	/** 选择开户地址 S */
	let showSelectAccountBank = ref(true);
	// 表单数据
	let formData = ref({
		settleBankCardImg: "", // 银行卡照片
		accountName: store.certificationInformation.name, // 账户名称
		cardNo: "", // 银行卡号
		bankName: "", // 开户主行
		bankId: '',
		defaultCard: 0, // 是否默认账户,
		oemUserNo: 'BU100002',
		accountMobileNo: "",
		userId: store.userInfo.userId,
		bankType: "JSK"
	});
	// 当前商户
	let agentName = ref(store.certificationInformation.name);

	onLoad(async () => {
		// oss签名配置
		// ossConfig.value = await getOsssSignature("agent");
		console.log('store.tokenInfo', store.certificationInformation.name)
	});

	// 是否提交中
	let loading = ref(false);
	// 提交表单
	function submitEvent() {
		console.log("formData.value", formData.value)
		if (loading.value) {
			return;
		}
		if (!formData.value.settleBankCardImg) {
			showToast("请上传银行卡");
			return;
		}
		// if (!formData.value.accountName) {
		// 	showToast("请输入账户名称");
		// 	return;
		// }
		if (!formData.value.cardNo) {
			showToast("请输入银行卡号");
			return;
		}
		if (!formData.value.bankName) {
			showToast("请选择开户主行");
			return;
		}
		if (!formData.value.accountMobileNo) {
			showToast("请输入预留手机号");
			return;
		}
		if (!formData.value.defaultCard && formData.value.defaultCard !== 0) {
			showToast("请选择账户类型");
			return;
		}
		console.log("formData.value", formData.value)
		bindBankCard(formData.value)
			.then((res) => {
				showToast("添加成功", "success");
				setTimeout(() => {
					// uni.navigateTo({
					// 	url: "/authentication/realBank/index",
					// });
					uni.navigateBack()
				}, 1500);
			})
			.catch(() => {
				loading.value = false;
			});
		// }
	}
	// 姓名
	function nameChange(ev) {
		childRef.value.openDialog();
	}

	// 银行卡号
	function noChange(ev) {
		formData.value.cardNo = onlyNumberReg(ev.detail.value);
	}

	// 上传银行卡
	function uploadBankCard() {
		console.log("888888888")
		uploadImg(ossConfig.value)
			.then((res) => {
				formData.value.settleBankCardImg = res;

				// 识别银行卡
				return queryBankCardInfo({
					params: {
						url: res,
					},
				});
			})
			.then((res) => {
				const {
					bankName,
					cardNum
				} = res;
				formData.value.cardNo = cardNum;
				formData.value.bankName = bankName
				getBankId(bankName)

			})
	}
	// 默认账户
	const defaultChange = (val) => {
		console.log("val", val.detail.value)
		formData.value.defaultCard = val.detail.value ? 1 : 0
	}
	// 获取银行id
	const getBankId = (val) => {
		queryBankName({
				params: {
					bankName: val,
				},
			})
			.then((res) => {
				console.log("8888888", res)
				formData.value.bankId = res
			})
			.catch(() => {

			});
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>